<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="keywords" content="" />
    <meta name="description" content="taoqianbao,demo ajax scroll" />
    <meta name="robots" content="all" />
    <meta name="author" content="taoqianbao, taoqianbao(at)gmail(dot)com" />
    <meta name="copyright" content="(c) 2012-2014 taoqianbao">
    <title>jQuery.LocalScroll - AJAX Demo</title>
    <link rel="shortcut icon" href="" type="image/x-icon" />
    <style type="text/css">
        /*base.css*/
        body { padding: 0 5px; font-family: Verdana, sans-serif; background-color: #DDD; }
        ul, li, h3, h2, h1, p { padding: 0; margin: 0; list-style: none; }
        
        .sidebar { position: absolute; right: 5px; top: 15px; }
        
        #links { border: 1px solid black; /*width:210px;*/ padding: 10px; background-color: white; }
        #links h3 { color: #933; }
        #links ul { padding: 8px 0 3px 20px; }
        #links li { list-style-type: circle; }
        #links a { color: #69C; }
        
        h1 { margin: 20px 0; color: #5B739C; }
        h1 strong { font-size: 13px; color: #777; }
        h2.title { color: #933; margin-bottom: 10px; text-align: right; }
        .clear { clear: left; }
    </style>
    <style type="text/css">
        /*style.css*/
        body { height: 1600px; }
        
        .part { border: 1px solid black; background-color: white; }
        .part h3 { color: #933; }
        #toc { display: block; padding: 10px; position: relative; margin: 15px 0; width: 305px; }
        #toc h3 { padding-bottom: 10px; }
        #toc h3 strong { font-size: 13px; color: black; }
        
        #toc li { list-style-type: circle; padding-left: 5px; margin-left: 15px; }
        #toc a { color: #69C; }
        div.section { border: 1px black solid; width: 950px; padding: 10px; margin: 5px 0; position: relative; clear: both; }
        div.section h3 { margin-bottom: 10px; }
        div.section li { float: left; }
        div.pane { overflow: auto; clear: left; margin: 10px 0 0 10px; position: relative; width: 826px; height: 322px; }
        ul.elements { background-color: #5B739C; }
        ul.elements li { width: 200px; height: 100px; font-weight: bolder; border: 1px black solid; text-align: center; padding: 50px; position: relative; background-color: #DDD; }
        ul.elements li a { bottom: 20px; color: #933; font-size: 12px; left: 125px; position: absolute; }
        ul.elements li p { color: #666; }
        #pane-options ul.elements li { margin: 5px; }
        #pane-options { margin-bottom: 10px; }
        ul.links { height: 20px; clear: left; }
        ul.links a { color: #69C; margin: 0pt 5px; }
        h3 span { position: absolute; }
        .message { background: #EEE; border: 1px solid #999; color: #333; font-size: 12px; font-weight: normal; padding: 1px; margin-top: 2px; }
    </style>
    <script src="../js/jquery-1.4.min.js" type="text/javascript"></script>
    <script src="../js/jquery.scrollTo-min.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(function ($) {
            /**
            * Demo binding and preparation, no need to read this part
            */
            //borrowed from jQuery easing plugin
            //http://gsgd.co.uk/sandbox/jquery.easing.php
            $.easing.elasout = function (x, t, b, c, d) {
                var s = 1.70158; var p = 0; var a = c;
                if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
                if (a < Math.abs(c)) { a = c; var s = p / 4; }
                else var s = p / (2 * Math.PI) * Math.asin(c / a);
                return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
            };
            // back links
            $('a.back').click(function () {
                $(this).parents('div.pane').scrollTo(0, 800, { queue: true });
                $(this).parents('div.section').find('span.message').text(this.title);
                return false;
            });
            //just for the example, to stop the click on the links.
            $('ul.links').click(function (e) {
                e.preventDefault();
                var link = e.target;
                link.blur();
                if (link.title)
                    $(this).parent().find('span.message').text(link.title);
            });

            // This one is important, many browsers don't reset scroll on refreshes
            // Reset all scrollable panes to (0,0)
            $('div.pane').scrollTo(0);
            // Reset the screen to (0,0)
            $.scrollTo(0);

            // TOC, shows how to scroll the whole window
            $('#toc a').click(function () {//$.scrollTo works EXACTLY the same way, but scrolls the whole screen
                $.scrollTo(this.hash, 1500, { easing: 'elasout' });
                $(this.hash).find('span.message').text(this.title);
                return false;
            });

            // Target examples bindings
            // THIS DEMO IS NOT INTENDED TO SHOW HOW TO CODE IT
            // JUST THE MULTIPLE OPTIONS. THIS CODE IS UGLY.
            var $paneTarget = $('#pane-target');

            $('#relative-selector').click(function () {
                $paneTarget.stop().scrollTo('li:eq(14)', 800);
            });
            $('#jquery-object').click(function () {
                var $target = $paneTarget.find('li:eq(14)');
                $paneTarget.stop().scrollTo($target, 800);
            });
            $('#dom-element').click(function () {
                var target = $paneTarget.find('ul').get(0).childNodes[20];
                $paneTarget.stop().scrollTo(target, 800);
            });
            $('#absolute-number').click(function () {
                $paneTarget.stop().scrollTo(150, 800);
            });
            $('#absolute-number-hash').click(function () {
                $paneTarget.stop().scrollTo({ top: 800, left: 700 }, 800);
            });
            $('#absolute-position').click(function () {
                $paneTarget.stop().scrollTo('520px', 800);
            });
            $('#absolute-position-hash').click(function () {
                $paneTarget.stop().scrollTo({ top: '110px', left: '290px' }, 800);
            });
            $('#relative-position').click(function () {
                $paneTarget.stop().scrollTo('+=100', 500);
            });
            $('#relative-position-hash').click(function () {
                $paneTarget.stop().scrollTo({ top: '-=100px', left: '+=100' }, 500);
            });

            $('#percentage-position').click(function () {
                $paneTarget.stop().scrollTo('50%', 800);
            });

            // Options examples bindings, they will all scroll to the same place, with different options
            function reset_o() {//before each animation, reset to (0,0), skip this.
                $paneOptions.stop(true).attr({ scrollLeft: 0, scrollTop: 0 });
            };
            var $paneOptions = $('#pane-options');

            $('#options-no').click(function () {
                reset_o(); $paneOptions.scrollTo('li:eq(15)', 1000);
            });
            $('#options-axis').click(function () {// only scroll horizontally
                reset_o(); $paneOptions.scrollTo('li:eq(15)', 1000, { axis: 'x' });
            });
            $('#options-duration').click(function () {// it's the same as specifying it in the 2nd argument
                reset_o(); $paneOptions.scrollTo('li:eq(15)', { duration: 3000 });
            });
            $('#options-easing').click(function () {
                reset_o(); $paneOptions.scrollTo('li:eq(15)', 2500, { easing: 'elasout' });
            });
            $('#options-margin').click(function () {//scroll to the "outer" position of the element
                reset_o(); $paneOptions.scrollTo('li:eq(15)', 1000, { margin: true });
            });
            $('#options-offset').click(function () {//same as { top:-50, left:-50 }
                reset_o(); $paneOptions.scrollTo('li:eq(15)', 1000, { offset: -50 });
            });
            $('#options-offset-hash').click(function () {
                reset_o(); $paneOptions.scrollTo('li:eq(15)', 1000, { offset: { top: -5, left: -30} });
            });
            $('#options-over').click(function () {//same as { top:-50, left:-50 }
                reset_o(); $paneOptions.scrollTo('li:eq(15)', 1000, { over: 0.5 });
            });
            $('#options-over-hash').click(function () {
                reset_o(); $paneOptions.scrollTo('li:eq(15)', 1000, { over: { top: 0.2, left: -0.5} });
            });
            $('#options-queue').click(function () {//in this case, having 'axis' as 'xy' or 'yx' matters.
                reset_o(); $paneOptions.scrollTo('li:eq(15)', 2000, { queue: true });
            });
            $('#options-onAfter').click(function () {
                reset_o(); $paneOptions.scrollTo('li:eq(15)', 2000, {
                    onAfter: function () {
                        $('#options-message').text('Got there!');
                    }
                });
            });
            // onAfterFirst exists only when queuing
            $('#options-onAfterFirst').click(function () {
                reset_o(); $paneOptions.scrollTo('li:eq(15)', 1600, {
                    queue: true,
                    onAfterFirst: function () {
                        $('#options-message').text('Got there horizontally!');
                    },
                    onAfter: function () {
                        $('#options-message').text('Got there vertically!');
                    }
                });
            });
        });
    </script>
</head>
<body>
    <h1>
        jQuery.ScrollTo&nbsp;<strong>by Ariel Flesler</strong></h1>
    <div class="sidebar">
        <div id="links">
            <h3>
                Links</h3>
            <ul>
                <li><a target="_blank" href="http://plugins.jquery.com/project/ScrollTo">Project Page</a></li>
                <li><a target="_blank" href="http://flesler.blogspot.com/2007/10/jqueryscrollto.html">
                    Main blog article</a></li>
                <li><a target="_blank" href="http://flesler.blogspot.com/search/label/jQuery.ScrollTo">
                    All articles</a></li>
                <li><a href="../localScroll/">LocalScroll Demo</a></li>
                <li><a href="../serialScroll/">SerialScroll Demo</a></li>
                <li><a href="old/">Old Demo</a></li>
            </ul>
        </div>
    </div>
    <div id="toc" class="part">
        <h3>
            Table of contents&nbsp;<strong>(try these)</strong></h3>
        <ul>
            <li><a title="$.scrollTo( '#target-examples', 800, {easing:'elasout'} );" href="#target-examples">
                Ways to specify the target</a></li>
            <li><a title="$.scrollTo( '#options-examples', 800, {easing:'elasout'} );" href="#options-examples">
                Options</a></li>
        </ul>
    </div>
    <div id="target-examples" class="section part">
        <h3>
            Ways to specify the target&nbsp;<span id="target-message" class="message">Click an option,
                to see it in action</span></h3>
        <ul class="links">
            <li><a title="$(...).scrollTo( 'li:eq(14)', 800 );" id="relative-selector" href="#">
                Relative selector</a></li>
            <li><a title="$(...).scrollTo( $('div li:eq(14)'), 800 );" id="jquery-object" href="#">
                jQuery object</a></li>
            <li><a title="$(...).scrollTo( $('ul').get(2).childNodes[20], 800 );" id="dom-element"
                href="#">DOM Element</a></li>
            <li><a title="$(...).scrollTo( 150, 800 );" id="absolute-number" href="#">Absolute number</a></li>
            <li><a title="$(...).scrollTo( { top:800, left:700}, 800 );" id="absolute-number-hash"
                href="#">Absolute number(hash)</a></li>
        </ul>
        <ul class="links">
            <li><a title="$(...).scrollTo( '520px', 800 );" id="absolute-position" href="#">Absolute
                position</a></li>
            <li><a title="$(...).scrollTo( {top:'110px', left:'290px'}, 800 );" id="absolute-position-hash"
                href="#">Absolute position(hash)</a></li>
            <li><a title="$(...).scrollTo( '+=100px', 800 );" id="relative-position" href="#">Relative
                position</a></li>
            <li><a title="$(...).scrollTo( {top:'-=100px', left:'+=100'}, 800 );" id="relative-position-hash"
                href="#">Relative position(hash)</a></li>
            <li><a title="$(...).scrollTo( '50%', 800 );" id="percentage-position" href="#">Percentage</a></li>
        </ul>
        <div id="pane-target" class="pane">
            <ul class="elements" style="height: 1011px; width: 1820px;">
                <li>
                    <p>
                        0</p>
                    <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                        <p>
                            1</p>
                        <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                            <p>
                                2</p>
                            <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                <p>
                                    3</p>
                                <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                    <p>
                                        4</p>
                                    <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                        <p>
                                            5</p>
                                        <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                            <p>
                                                6</p>
                                            <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                <p>
                                                    7</p>
                                                <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                    <p>
                                                        8</p>
                                                    <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                        <p>
                                                            9</p>
                                                        <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                            <p>
                                                                10</p>
                                                            <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                <p>
                                                                    11</p>
                                                                <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                    <p>
                                                                        12</p>
                                                                    <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                        <p>
                                                                            13</p>
                                                                        <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                            <p>
                                                                                14</p>
                                                                            <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                <p>
                                                                                    15</p>
                                                                                <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                    <p>
                                                                                        16</p>
                                                                                    <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                        <p>
                                                                                            17</p>
                                                                                        <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                            <p>
                                                                                                18</p>
                                                                                            <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                <p>
                                                                                                    19</p>
                                                                                                <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                    <p>
                                                                                                        20</p>
                                                                                                    <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                        <p>
                                                                                                            21</p>
                                                                                                        <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                            <p>
                                                                                                                22</p>
                                                                                                            <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                                <p>
                                                                                                                    23</p>
                                                                                                                <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                                    <p>
                                                                                                                        24</p>
                                                                                                                    <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                                        <p>
                                                                                                                            25</p>
                                                                                                                        <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                                            <p>
                                                                                                                                26</p>
                                                                                                                            <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                                                <p>
                                                                                                                                    27</p>
                                                                                                                                <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                                                    <p>
                                                                                                                                        28</p>
                                                                                                                                    <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                                                        <p>
                                                                                                                                            29</p>
                                                                                                                                        <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li>
            </ul>
        </div>
    </div>
    <div id="options-examples" class="section part">
        <h3>
            Options&nbsp;<span id="options-message" class="message">The examples shown here, are
                summarized for brevity, check the source for real code</span></h3>
        <ul class="links">
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1000 );" id="options-no" href="#">no options</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {axis:'x'} );//only scroll on this axis (can be x, y, xy or yx)"
                id="options-axis" href="#">axis</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', {duration:3000} );//another way of calling the plugin"
                id="options-duration" href="#">duration</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 2500, {easing:'elasout'} );//specify an easing equation"
                id="options-easing" href="#">easing</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {margin:true} );//deduct the margin and border from the final position"
                id="options-margin" href="#">margin</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {offset:-50} );//add or deduct from the final position"
                id="options-offset" href="#">offset</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {offset: {top:-5, left:-30} });"
                id="options-offset-hash" href="#">offset(hash)</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {over:0.5} );//add or deduct a fraction of its height/width"
                id="options-over" href="#">over</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1000, {over:{top:0.2, left:-0.5} );"
                id="options-over-hash" href="#">over(hash)</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1600, {queue:true} );//scroll one axis, then the other"
                id="options-queue" href="#">queue</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1600, {onAfter:function(){ } } );//called after the scrolling ends"
                id="options-onAfter" href="#">onAfter</a></li>
            <li><a title="$(...).scrollTo( 'li:eq(15)', 1600, {queue:true, onAfterFirst:function(){ } } );//called after the first axis scrolled"
                id="options-onAfterFirst" href="#">onAfterFirst</a></li>
        </ul>
        <div id="pane-options" class="pane">
            <ul class="elements" style="height: 1062px; width: 1877px;">
                <li>
                    <p>
                        0</p>
                    <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                        <p>
                            1</p>
                        <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                            <p>
                                2</p>
                            <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                <p>
                                    3</p>
                                <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                    <p>
                                        4</p>
                                    <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                        <p>
                                            5</p>
                                        <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                            <p>
                                                6</p>
                                            <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                <p>
                                                    7</p>
                                                <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                    <p>
                                                        8</p>
                                                    <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                        <p>
                                                            9</p>
                                                        <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                            <p>
                                                                10</p>
                                                            <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                <p>
                                                                    11</p>
                                                                <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                    <p>
                                                                        12</p>
                                                                    <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                        <p>
                                                                            13</p>
                                                                        <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                            <p>
                                                                                14</p>
                                                                            <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                <p>
                                                                                    15</p>
                                                                                <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                    <p>
                                                                                        16</p>
                                                                                    <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                        <p>
                                                                                            17</p>
                                                                                        <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                            <p>
                                                                                                18</p>
                                                                                            <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                <p>
                                                                                                    19</p>
                                                                                                <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                    <p>
                                                                                                        20</p>
                                                                                                    <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                        <p>
                                                                                                            21</p>
                                                                                                        <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                            <p>
                                                                                                                22</p>
                                                                                                            <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                                <p>
                                                                                                                    23</p>
                                                                                                                <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                                    <p>
                                                                                                                        24</p>
                                                                                                                    <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                                        <p>
                                                                                                                            25</p>
                                                                                                                        <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                                            <p>
                                                                                                                                26</p>
                                                                                                                            <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                                                <p>
                                                                                                                                    27</p>
                                                                                                                                <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                                                    <p>
                                                                                                                                        28</p>
                                                                                                                                    <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li><li>
                                                                                                                                        <p>
                                                                                                                                            29</p>
                                                                                                                                        <a href="#" title="$(...).scrollTo( 0, 800, {queue:true} );" class="back">go back</a></li>
            </ul>
        </div>
        <p class="message">
            Note that when 'queue' is true, choosing 'axis' as 'xy' or 'yx' matters</p>
        <p class="message">
            Don't use a hash for the target to scroll only one axis, use the option 'axis' instead.
            The hash is used to scroll both axes with different positions.</p>
    </div>
</body>
</html>
